/* * @Author: hhy * @Date: 2019-01-29 13:56:38 * @Last Modified by: hhy * @Last
Modified time: 2019-04-18 17:32:46 * @文件说明: 搜索输入框组件--TODO:ok */
<template>
  <div
    @change="search"
    :class="{ inline: inline, right: right }"
    class="h-search"
    @keyup.enter="search"
  >
    <el-input
      :key="inputKey"
      v-model="val"
      :style="style"
      v-bind="$attrs"
      size="large"
      clearable
      maxlength="20"
      @input="(val) => $emit('input', val)"
      @clear="search"
    >
      <i
        class="el-input__icon el-icon-search"
        style="cursor: pointer"
        @click="search"
      />
    </el-input>
  </div>
</template>

<script>
import { defineComponent, ref, toRefs, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
  name: "h-search",
  props: {
    query: {
      type: String,
      default: "search",
    },

    value: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "200",
    },
    inline: {
      type: Boolean,
      default: false,
    },
    right: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    style() {
      return {
        width: this.width + "px",
      };
    },
  },
  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const val = ref(props.value);
    const state = reactive({
      inputKey: Number(new Date()),
    });
    const search = (e) => {
      console.log(props.query);
      if (props.query) {
        console.log(val.value);
        router.push({
          path: route.path,
          query: {
            ...route.query,
            [props.query]: val.value,
            page: 1,
          },
        });
      } else {
        context.emit("search", val.value);
      }
    };
    return {
      ...toRefs(state),
      val,
      search,
    };
  },

  methods: {},
});
</script>

<style lang="scss" scoped>
.inline {
  display: inline-block;
}
.right {
  text-align: right;
}
</style>
